<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>添加食谱</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/item.css">
	<link rel="stylesheet" href="../css/layui.css" />
	<style>
		#portrait1,
		#portrait2,
		#portrait3,
		#portrait4,
		#portrait5 {
			width: 100px;
			height: 100px;
			border: 1px solid #ddd;
		}

		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.layui-input-block {
			line-height: 38px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}

		.search {
			width: 30%;
		}

		.search,
		.breakfast,
		.breakfastadd,
		.lunch,
		.lunchadd,
		.dinner {
			background-color: #73c7ec;
			color: white;
		}

		label>input {
			height: 100%;
			width: 100%;
			border: none;
			background: none;
		}

		label>input:focus {
			border: deepskyblue thin dashed;
		}
		.cookbook-last{
			display: flex;
			align-items: flex-start;
		}
		.cookbook-delpic{
			width: 20px;
			height: 20px;
		}
	</style>
</head>


<body>
	
	<div class="layui-row" id="vue-root">
		<div class="layui-col-md6 layui-col-md-offset3" style="margin-bottom: 50px;">
			<div class="layui-form-item">
				<label class="layui-form-label">星期</label>
				<div class="layui-input-block">
					<select name="cookbookDay" data-vv-as="星期几" class="layui-textarea search" v-model="item.day">
						<option value="null" disabled="disabled">请选择日期</option>
						<option v-for="day in days" :key="day.id" :value="day.id" v-text="day.name"></option>
					</select>
					<div class="checkout_state" v-text="err('cookbookDay')"></div>
				</div>
			</div>

			<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
				<input type="file" v-validate="'size:10240'" data-vv-as="图片" ref="file" name="file" accept="image/*"
					@change="imports">
			</form>

			<form class="layui-form" name="Form1" id="Form1">
				<div class="layui-form-item">
					<label class="layui-form-label">早餐图片</label>
					<label class="cookbook-last" @click="lastChange('breakfastPic')">
						<img :src="getImg(item.breakfastPic)" id="portrait1">
						<img class="cookbook-delpic" v-show="item.breakfastPic" @click.stop="delPic('breakfastPic')" src="/image/remove.svg" alt="" title="删除图片">
					</label>
					<div class="checkout_state" v-text="err('file')"></div>
				</div>
			</form>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<input v-model="item.breakfastName">
				</label>
				<div class="layui-input-block">
					<textarea name="breakfast" data-vv-as="早餐名称" placeholder="请输入早餐" class="layui-textarea breakfast"
						v-model="item.breakfast"></textarea>
					<div class="checkout_state" v-text="err('breakfast')"></div>
				</div>
			</div>
			<form class="layui-form" name="Form2" id="Form2">
				<div class="layui-form-item">
					<label class="layui-form-label">早加餐图片</label>
					<label class="cookbook-last" @click="lastChange('breakfastPlusPic')">
						<img :src="getImg(item.breakfastPlusPic)" id="portrait2">
						<img v-show="item.breakfastPlusPic" class="cookbook-delpic" @click.stop="delPic('breakfastPlusPic')" src="/image/remove.svg" alt="" title="删除图片">
					</label>
					<div class="checkout_state" v-text="err('file')"></div>
				</div>
			</form>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<input v-model="item.breakfastPlusName">
				</label>
				<div class="layui-input-block">
					<textarea name="breakfastPlus" data-vv-as="早加餐名称" placeholder="请输入早加餐"
						class="layui-textarea breakfastadd" v-model="item.breakfastPlus"></textarea>
					<div class="checkout_state" v-text="err('breakfastPlus')"></div>
				</div>
			</div>
			<form class="layui-form" name="Form3" id="Form3">
				<div class="layui-form-item">
					<label  class="layui-form-label">午餐图片</label>
					<label class="cookbook-last" @click="lastChange('lunchPic')">
						<img :src="getImg(item.lunchPic)" id="portrait3">
						<img class="cookbook-delpic" v-show="item.lunchPic" @click.stop="delPic('lunchPic')" src="/image/remove.svg" alt="" title="删除图片">
					</label>
					<div class="checkout_state" v-text="err('file')"></div>
				</div>
			</form>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<input v-model="item.lunchName">
				</label>
				<div class="layui-input-block">
					<textarea name="lunch" data-vv-as="午餐名称" placeholder="请输入午餐" class="layui-textarea lunch"
						v-model="item.lunch"></textarea>
					<div class="checkout_state" v-text="err('lunch')"></div>
				</div>
			</div>
			<form class="layui-form" name="Form4" id="Form4">
				<div class="layui-form-item">
					<label class="layui-form-label">午加餐图片</label>
					<label class="cookbook-last" @click="lastChange('lunchPlusPic')">
						<img :src="getImg(item.lunchPlusPic)" id="portrait4">
						<img class="cookbook-delpic" v-show="item.lunchPlusPic" @click.stop="delPic('lunchPlusPic')" src="/image/remove.svg" alt="" title="删除图片">
					</label>
					<div class="checkout_state" v-text="err('file')"></div>
				</div>
			</form>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<input v-model="item.lunchPlusName">
				</label>
				<div class="layui-input-block">
					<textarea name="lunchPlus" data-vv-as="午加餐名称" placeholder="请输入午加餐" class="layui-textarea lunchadd"
						v-model="item.lunchPlus"></textarea>
					<div class="checkout_state" v-text="err('lunchPlus')"></div>
				</div>
			</div>
			<form class="layui-form" name="Form5" id="Form5">
				<div class="layui-form-item">
					<label class="layui-form-label">晚餐图片</label>
					<label class="cookbook-last" @click="lastChange('dinnerPic')">
						<img :src="getImg(item.dinnerPic)" id="portrait5">
						<img class="cookbook-delpic" v-show="item.dinnerPic" @click.stop="delPic('dinnerPic')" src="/image/remove.svg" alt="" title="删除图片">
					</label>
					<div class="checkout_state" v-text="err('file')"></div>
				</div>
			</form>
			<div class="layui-form-item">
				<label class="layui-form-label">
					<input v-model="item.dinnerName">
				</label>
				<div class="layui-input-block">
					<textarea name="dinner" data-vv-as="晚餐名称" placeholder="请输入晚餐" class="layui-textarea dinner"
						v-model="item.dinner"></textarea>
					<div class="checkout_state" v-text="err('dinner')"></div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	
	
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		var dayList = '日一二三四五六'.split('').map(function (it) {
			return '星期' + it;
		});


		var app = new Vue(merge({
			data: {
				item: {
					schoolId: top_params().id
				},
				dayList: dayList,
				days: dayList.map(function (it, index) {
					return { id: index, name: it };
				}),
				last: null,
				url: '/pc/cookbook'
			},
			created: function () {
				this.formatData(this.item);
				this.init();
			},
			methods: {
				formatData: function (data) {
					var o = {
						breakfast: '早餐',
						breakfastPlus: '早加餐',
						lunch: '午餐',
						lunchPlus: '午加餐',
						dinner: '晚餐'
					};

					for (var key in o)
						if (!data[key + 'Name'])
							data[key + 'Name'] = o[key];

				},
				imports: function () {
					axios.post('/pc/upload/cookbook?schoolId=' + this.item.schoolId,
						new FormData(this.$refs.form)).then(function (res) {
							console.log(res);
							Vue.set(this.item, this.last, res.data.data);
							this.$refs.file.value = '';
							this.last = null;
							console.log(this.item);
						}.bind(this));
				},
				getImg: function (pic) {
					if (!pic) return '/image/upload.png';
					return '/static/' + this.item.schoolId + '/cookbook/' + pic;
				},
				delPic: function (last) {
					this.last = last;
					this.item[last] = ""
				},
				lastChange: function (last) {

					if (last) {
						this.last = last
						this.$refs.file.click();
					}
				},

			},
		}));
	</script>

</body>

</html>